5.9 KB · ⇊ 2 parts · ⤓ Micron 5.9 KB · ⤓ HTML 11.2 KB

top

Ein CSS-Framework ist eine Sammlung von Gestaltungselementen und Hilfsmitteln für einfaches und standardisiertes Webdesign mit CSS. Die meisten CSS-Frameworks bieten als Basis ein Grid-Gestaltungsraster sowie einige grundlegende Gestaltungselemente wie Schaltflächen, Menüs und Eingabefelder. Größere Frameworks bieten zudem noch JavaScript-basierte Funktionen, welche die Gestaltungselemente um zusätzliche, aber in der Regel optionale Funktionalitäten erweitern (Unobtrusive JavaScript).

CSS-Frameworks können unterschiedliche Funktionen anbieten:

• Die Hauptfunktion ist meist ein Grid-System, besonders auch für Responsive Webdesign. Diese unterscheiden sich incite-ref-1[1]

• den möglichen Grundbreiten des Viewports und eventuelle Breakpoints,

• der Verwendung von Pixel (px), der aktuellen Schriftgröße (em) oder prozentualen Werten für Breitenangaben,

• der Anzahl der Spalten und Reihen,

• der relativen oder absoluten Verschachtelung von Elementen und

• der Art und Weise der Media Queries.

• Vor allem größere Frameworks bieten auch zahlreiche graphische Elemente wie

• Webtypografie,

• Icon-Sets in CSS-Sprites oder Icon-Fonts,

• Styling für Dropout-Menüs, Tooltips, Schaltflächen, Elemente von Webformularen und

• Elemente für grafische Benutzeroberflächen wie Akkordeon, Registerkarten, Galerien oder Modal-Fenster (Lightbox).

• Zusätzlich bieten viele Frameworks CSS Anpassungen, beispielsweise

• Reset-Stylesheets zur Vereinheitlichung der Formatierungen,

• oft verwendete CSS-Hilfsklassen (left, hide) oder

• Equalizer, um Inhalte auf gleiche Höhe zu bringen.

Größere CSS-Frameworks verwenden CSS-Interpreter wie Sass, Less oder Stylus.

Einige weit verbreitete Beispiele sind Bootstrap, YAML, Foundation, UIkit, Skeleton oder Semantic UI.

• Siehe auch

• Einzelnachweise

• Weblinks

• Webframework

• Liste von Webframeworks

cite-note-11. ↑ Archivierte Kopie (Memento des Originals vom 31. Mai 2015 im Internet Archive) Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.@1@2Vorlage:Webachiv/IABot/responsive.vermilion.com

• CSS Front-end Frameworks with comparison (englisch) Vergleich zahlreicher Frameworks mit unterstützten Browsern und Nutzung von LESS/SASS

• Awesome CSS Frameworks Aktuelle Liste von CSS Frameworks (sortiert nach Kategorie und Beliebtheit)

• List of Best CSS Frameworks – Die besten CSS-Frameworks helfen Ihnen, verantwortungsbewusstere Webseiten zu erstellen.